<template>
	<view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row>睡眠质量</u-row>
				<charts :option="option1" id="5" :height="152"></charts>
				<view class="sleep-type">
					<u-row justify="space-evenly">
						<view v-for="i in option3" :key="i.title" class="item-type">
							<view class="dot" :style="{backgroundColor:i.color}"></view>
							{{i.title}}
						</view>
					</u-row>
				</view>
				<view class="tip">注释：未超过1个小时的睡眠无法科学计算，均归类为零星小睡</view>
				<view class="score-block">
					<u-row>
						<u-col align="center" :span="4" :key="i.title" v-for="i in info">
							<u-row>
								<u-image width="10px" height="10px" :src="i.icon"></u-image>
								{{i.title}}
							</u-row>
							<u-row
								class="sub-title">{{i.subTitle ? i.subTitle.toString().split('时')[0]:'0'}}<span>{{i.unit}}</span>{{i.subTitle ? i.subTitle.toString().split('时')[1].replace('分',''):'0'}}<span>{{i.unit1}}</span></u-row>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">睡眠概况
					<u-icon color="#fff" name="question-circle"></u-icon>
				</u-row>
				<view class="sleep-gk">
					<view v-for="time in option4" :key="time.title">
						<u-row justify="space-between">
							<view :style="{color:time.color}">
								<u-row>
									{{time.title}}
									<view class="tag" :style="{background:time.typeBg,color:time.typeColor}">
										{{time.type}}
									</view>
								</u-row>
							</view>
							<view style="color:#999">{{time.time}}</view>
						</u-row>
						<u-slider disabled :min="0" blockSize="12" v-model="time.value"></u-slider>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRandomNumber
	} from "@/utils/index.js"
	import sleepChartCard from './components/sleep-chart-card.vue';
	export default {

		data() {
			return {
				info: [{
					title: '平均深睡',
					icon: require("../../static/images/homePage/zywz.png"),
					subTitle: '02时20分',
					unit: 'h',
					unit1: 'min',
				}, {
					title: '平均浅睡',
					icon: require("../../static/images/homePage/zywz.png"),
					subTitle: '02时20分',
					unit: 'h',
					unit1: 'min',
				}, {
					title: '平均眼动',
					icon: require("../../static/images/homePage/zywz.png"),
					subTitle: '02时20分',
					unit: 'h',
					unit1: 'min',
				}],
				option4: [{
						title: '睡眠时长',
						time: '6时50分',
						color: '#999',
						value: 7 * 8,
						type: '良好',
						typeBg: '#383218',
						typeColor: '#FFAE4B'
					}, {

						title: '在床时长',
						time: '0时6分',
						color: '#999',
						value: 0.6 * 8,
						type: '注意',
						typeBg: '#381C26',
						typeColor: '#FF2B2C'
					}, {
						title: '睡眠效率',
						time: '99%',
						color: '#999',
						value: 99,
						type: '最佳',
						typeBg: '#012015',
						typeColor: '#54D7A5'
					}, {
						title: '入睡时长',
						time: '3分',
						color: '#999',
						value: 0.3 * 8,
						type: '最佳',
						typeBg: '#012015',
						typeColor: '#54D7A5'
					}, {
						title: '平均心率',
						time: '64次/分',
						color: '#999',
						value: 64,
						type: '最佳',
						typeBg: '#012015',
						typeColor: '#54D7A5'
					}, {
						title: '平均HRV',
						time: '44ms',
						color: '#999',
						value: 44,
						type: '良好',
						typeBg: '#383218',
						typeColor: '#FFAE4B'
					}

				],
				option3: [{
					title: '零星小睡',
					time: '1时0分',
					color: '#4191F9',
					value: 1 * 8
				}, {
					title: '快速眼动',
					time: '0时6分',
					color: '#54D7A5',
					value: 0.6 * 8
				}, {
					title: '深睡',
					time: '2时24分',
					color: '#02A166',
					value: 2.5 * 8
				}, {
					title: '浅睡',
					time: '4时12分',
					color: '#FFD8BB',
					value: 4 * 8
				}, {
					title: '清醒',
					time: '0时3分',
					color: '#EE9060',
					value: 0.3 * 8
				}],
				option1: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						left: '5%',
						right: '6%',
						bottom: '5%',
						top: '14%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'],   
						axisLabel: { //坐标轴字体颜色
							textStyle: {
								color: '#999',
								fontSize: '8px'
							}
						},
						axisLine: {
							lineStyle: {
								color: "#999"
							}
						},
						axisTick: { //y轴刻度线
							show: false
						},
						splitLine: { //网格
							show: false,

						}
					},
					yAxis: {
						type: 'value',
						axisLabel: { //坐标轴字体颜色
							show: false,
							textStyle: {
								color: '#9eaaba'
							}
						},
						axisLine: {
							show: false,
						},
						axisTick: { //y轴刻度线
							show: false
						},
						splitLine: { //网格
							show: false,
						}
					},
					series: [{
						name: '浅睡',
						type: 'bar',
						stack: '睡眠',
						barWidth: '40%', //柱子宽度
						itemStyle: { //柱子颜色
							normal: {
								color: '#FFD8BB',
								// borderColor: "#fff",
								// borderWidth: 1,
							}
						},
						data: [60, 82, 51, 94, 100, 68, 74,60, 82, 51, 94, 100, 68, 74,60, 82, 51, 94, 100, 68, 74]
					}, {
						name: '清醒',
						type: 'bar',
						stack: '睡眠',
						barWidth: '40%', //柱子宽度
						itemStyle: { //柱子颜色
							normal: {
								color: '#EE9060',
								// borderColor: "#fff",
								// borderWidth: 1,
							}
						},
						data: [60, 82, 51, 94, 100, 68, 74]
					}, {
						name: '深睡',
						type: 'bar',
						stack: '睡眠',
						barWidth: '40%', //柱子宽度
						itemStyle: { //柱子颜色
							normal: {
								color: '#02A166',
								// borderColor: "#fff",
								// borderWidth: 1,
							}
						},
						data: [60, 82, 51, 94, 100, 68, 74]
					}, {
						name: '快速眼动',
						type: 'bar',
						stack: '睡眠',
						barWidth: '40%', //柱子宽度
						itemStyle: { //柱子颜色
							normal: {
								color: '#54D7A5',
								// borderColor: "#fff",
								// borderWidth: 1,
							}
						},
						data: [320, 332, 301, 334, 390, 330, 320]
					}, {
						name: '零星小睡',
						type: 'bar',
						stack: '睡眠',
						barWidth: '40%', //柱子宽度
						itemStyle: { //柱子颜色
							normal: {
								color: '#4191F9',
								// borderColor: "#fff",
								// borderWidth: 1,
							}
						},
						data: [12, 193, 240, 214, 239, 223, 202]
					}]
				},
			}
		},
		components: {
			sleepChartCard
		},
		methods: {
			//获取随机睡眠数据0-4
			randomNum(n) {
				var res = [];
				for (var i = 0; i < n; i++) {
					res.push(getRandomNumber(0, 6));
				}
				return res;
			}
		},
		mounted() {


		},
	}
</script>

<style scoped lang="scss">
	.jkzs-border {
		border-radius: 12px;
		margin-bottom: 12px;
		overflow: hidden;
		position: relative;

		.jkzs {
			border: 1px solid;
			border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 16px;
			width: 100%;
			min-height: 113px;
			background: #0B0F12;
			box-shadow: inset 0px 0px 12px 6px #2C281F;
			font-weight: bold;
			font-size: 14px;

			.score-block {
				background-color: #1B1B1B;
				border-radius: 6px;
				padding: 12px 0px;
				font-size: 12px;
				color: #999999;
				margin-top: 12px;

				::v-deep .u-image {
					margin-right: 3px;
				}

				.sub-title {
					font-size: 18px;
					color: #FFFFFF;
					margin-top: 6px;
					font-weight: 500;

					span {
						font-size: 8px;
						margin-left: 3px;
						margin-top: 3px;
					}
				}
			}


			.tip {
				margin-top: 8px;
				font-weight: 500;
				font-size: 10px;
				color: #999999;
			}

			.sleep-type {
				.item-type {
					margin-top: 15px;
					display: inline-flex;
					align-items: center;
					font-size: 12px;
					margin-right: 5px;

					.dot {
						width: 5px;
						height: 5px;
						border-radius: 50%;
						margin-right: 6px;
					}
				}
			}

			.sleep-gk {
				font-weight: normal;
				font-size: 12px;
				padding-top: 20px;

				.tag {
					width: 36px;
					height: 17px;
					line-height: 17px;
					background: #381C26;
					border-radius: 4px;
					margin-left: 6px;
					font-size: 9px;
					text-align: center;
				}

				::v-deep .uni-slider-wrapper {
					margin: 0px -15px;
				}

				::v-deep .uni-slider-thumb {
					display: none;
				}

				::v-deep.uni-slider-tap-area {
					padding: 0;
				}

				::v-deep .uni-slider-track {
					background: linear-gradient(90deg, #F3D2BA 0%, #02A166 100%);
				}

				::v-deep .uni-slider-handle-wrapper {
					height: 5px;
					background-color: #1F2224 !important;
				}
			}



		}



	}
</style>